---
permalink: /index.html
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JS Samples</title>
    <meta name="description" content="An interactive playground for Google Maps Platform JavaScript samples.">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <meta name="robots" content="noindex" />
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
      }

      .card {
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .card-header {
        margin: 0;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        border-radius: 6px 6px 0 0;
        background: #f5f5f5;
        font-weight: normal;
      }
      .card-footer {
        padding: 10px;
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }

      .button {
        appearance: none;
        background-color: #1a73e8;
        border: 1px solid #dadce0;
        border-radius: 6px;
        box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        line-height: 20px;
        padding: 4px 12px;
        position: relative;
        text-align: center;
        text-decoration: none;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: middle;
        white-space: nowrap;
      }

      .button:focus:not(:focus-visible):not(.focus-visible) {
        box-shadow: none;
        outline: none;
      }

      .button:hover {
        background-color: #1765cc;
      }

      iframe {
        border: 0;
        flex-grow: 1;
      }

      #sidebar {
        width: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;
        display:flex; flex-direction:column; gap: 10px;
      }
      </style>

      <script>
        function setIframe(src) {
          document.getElementById('iframe').src = src;
        }
      </script>
  </head>
  <body>

  {% set initial="./samples/playground.html?sample=map-simple" %}

  <div style="display:flex;gap: 10px; height: 100vh;">
    <div id="sidebar">
      {% for sample in collections.samples_ts|sort(false, true, 'fileSlug') %}
        <div class="card">
          <h4 class="card-header">{{ sample.data.name }}</h4>
          <div class="card-footer">
            <button class="button" onclick="setIframe('./samples/playground.html?sample={{ sample.data.name }}')">Playground</button>
            <button class="button" onclick="setIframe('./samples/{{ sample.data.name }}/iframe/index.html')">Iframe</button>
            <button class="button" onclick="setIframe('./samples/{{ sample.data.name }}/app/dist/index.html')">App</button>
            <a class="button" href="https://github.com/googlemaps/js-samples/tree/main/samples/{{ sample.data.name }}">Code</a>
          </div>
        </div>
      {% endfor %}
    </div>
    <div style="display:flex; flex-direction: column; gap: 10px; flex-grow: 1;">
      <iframe id="iframe" src="{{ initial }}" allow="geolocation"></iframe>
      <p>Rendering <a id="path" href="{{ initial }}">{{ initial }}</a></p>
    </div>
  </div>
  </body>
</html>